import { ethers } from "ethers";
import { useState } from "react";
import ErrorNotification from "./ErrorNotification";

function Create({ toggleCreate, fee, provider, market }) {
  const [options, setOptions] = useState([]);
  const [description, setDescription] = useState("");
  const [deadline, setDeadline] = useState("");
  const [newOption, setNewOption] = useState("");
  const [error, setError] = useState(null);

  const addOption = () => {
    if (newOption.trim() !== "") {
      setOptions([...options, newOption]);
      setNewOption("");
    }
  };

  const submitHandler = async () => {
    if (description.trim() === "" || options.length <= 1 || deadline === "") {
      setError("Please fill in all fields");
      return;
    }

    const deadlineTimestamp = Math.floor(new Date(deadline).getTime());
    const signer = await provider.getSigner();
    const FEE = ethers.parseUnits(fee+"",18);
    const transaction = await market.connect(signer).createIssue(description, options, deadlineTimestamp, { value: FEE });
    transaction.wait();
    console.log("Transaction done");
    toggleCreate();
  };

  return (
    <div className="p-6 max-w-lg mx-auto bg-gray-900 border-4 border-pink-500 shadow-[8px_8px_0_#ff00ff] font-pixel text-pink-400">
      {error && <ErrorNotification message={error} onClose={() => setError(null)} />}
      <h1 className="text-3xl mb-4 tracking-widest border-b-4 border-pink-500 pb-2">Create Issue</h1>
      <div className="mb-4 text-lg">
        <p>FEE for creating: <span className="text-green-400">{fee} ETH</span></p>
      </div>

      <div className="mb-4">
        {options.map((option, index) => (
          <div key={index} className="bg-gray-800 border-2 border-green-400 p-2 mb-2 shadow-[4px_4px_0_#00ff00]">
            {option}
          </div>
        ))}
      </div>

      <form
        onSubmit={(e) => {
          e.preventDefault();
          addOption();
        }}
        className="space-y-4"
      >
        <textarea
          className="w-full p-2 bg-gray-800 border-4 border-blue-500 text-white shadow-[4px_4px_0_#0000ff]"
          placeholder="Enter description for your issue.."
          value={description}
          onChange={(e) => setDescription(e.target.value)}
        />
        <input
          type="text"
          className="w-full p-2 bg-gray-800 border-4 border-yellow-400 text-white shadow-[4px_4px_0_#ffff00]"
          placeholder="Add new option"
          value={newOption}
          onChange={(e) => setNewOption(e.target.value)}
        />
        <input
          type="datetime-local"
          className="
            w-full p-2 
            bg-gray-800 text-white border-4 border-red-500 
            shadow-[4px_4px_0_#ff0000] 
            font-pixel text-lg tracking-widest 
            appearance-none
          "
          value={deadline}
          id="datetime"
          onChange={(e) => setDeadline(e.target.value)}
        />

        <button
          type="submit"
          className="w-full py-2 bg-blue-600 text-white border-4 border-blue-800 shadow-[4px_4px_0_#0000ff] transition-transform duration-200 active:translate-x-1 active:translate-y-1"
        >
          Add Option
        </button>
      </form>

      <div className="mt-6 flex justify-between">
        <button
          onClick={submitHandler}
          className="px-6 py-2 bg-green-500 text-white border-4 border-green-700 shadow-[4px_4px_0_#00ff00] transition-transform duration-200 active:translate-x-1 active:translate-y-1"
        >
          Submit
        </button>
        <button
          onClick={toggleCreate}
          className="px-6 py-2 bg-red-500 text-white border-4 border-red-700 shadow-[4px_4px_0_#ff0000] transition-transform duration-200 active:translate-x-1 active:translate-y-1"
        >
          Cancel
        </button>
      </div>
    </div>
  );
}

export default Create;
